<template>
	<div ref="chart" style="width: 500px; height: 288px"></div>
</template>

<script>
let data = [
	{
		name: '上海',
		type: 2,
		data: [
			{ value: 28, name: '08-03' },
			{ value: 41, name: '08-04' },
			{ value: 47, name: '08-05' },
			{ value: 35, name: '08-06' },
			{ value: 36, name: '08-07' },
			{ value: 25, name: '08-08' },
			{ value: 21, name: '08-09' },
			{ value: 9, name: '08-10' },
			{ value: 15, name: '08-11' },
			{ value: 18, name: '08-12' },
		],
	},
	{
		name: '北京',
		type: 1,
		data: [
			{ value: 18, name: '08-03' },
			{ value: 25, name: '08-04' },
			{ value: 31, name: '08-05' },
			{ value: 23, name: '08-06' },
			{ value: 24, name: '08-07' },
			{ value: 17, name: '08-08' },
			{ value: 14, name: '08-09' },
			{ value: 6, name: '08-10' },
			{ value: 10, name: '08-11' },
			{ value: 12, name: '08-12' },
		],
	},
	{
		name: '深圳',
		type: 4,
		data: [
			{ value: 35, name: '08-03' },
			{ value: 41, name: '08-04' },
			{ value: 48, name: '08-05' },
			{ value: 33, name: '08-06' },
			{ value: 34, name: '08-07' },
			{ value: 27, name: '08-08' },
			{ value: 24, name: '08-09' },
			{ value: 16, name: '08-10' },
			{ value: 20, name: '08-11' },
			{ value: 22, name: '08-12' },
		],
	},
	{
		name: '广州',
		type: 3,
		data: [
			{ value: 25, name: '08-03' },
			{ value: 65, name: '08-04' },
			{ value: 2, name: '08-05' },
			{ value: 35, name: '08-06' },
			{ value: 52, name: '08-07' },
			{ value: 12, name: '08-08' },
			{ value: 36, name: '08-09' },
			{ value: 5, name: '08-10' },
			{ value: 14, name: '08-11' },
			{ value: 8, name: '08-12' },
		],
	},
	{
		name: '全部',
		type: 0,
		data: [
			{ value: 38, name: '08-03' },
			{ value: 51, name: '08-04' },
			{ value: 57, name: '08-05' },
			{ value: 45, name: '08-06' },
			{ value: 46, name: '08-07' },
			{ value: 35, name: '08-08' },
			{ value: 31, name: '08-09' },
			{ value: 29, name: '08-10' },
			{ value: 35, name: '08-11' },
			{ value: 38, name: '08-12' },
		],
	},
];
import * as echarts from 'echarts';
export default {
	name: 'line',
	props: {
		headerType: {
			type: Number,
			default: function (e) {
				return '0';
			},
		},
	},
	created() {},
	mounted() {
		this.initChart(data);
	},
	data() {
		return {
			// 统计命令信息
			commandstats: null,
		};
	},
	watch: {
		headerType: {
			deep: true, // 深度监听，确保对象内部的数据变化也能触发
			handler(newVal) {
				this.commandstats.setOption;
				const datas = data;
				let newdata = [];
				this.commandstats.dispose();
				for (let item of datas) {
					if (item.type == newVal) {
						newdata.push(item);
					}
				}
				console.log(data, newdata);
				if (newVal == 0) {
					this.initChart(data);
				} else {
					this.initChart(newdata);
				}
			},
		},
	},
	methods: {
		initChart(newdata) {
			let colorList = ['#0783FA', '#FF2E2E', '#07D1FA', '#FFD15C', '#20E6A4'];
			let areaColorList = [
				{ to: 'rgba(7, 131, 250, 0)', from: 'rgba(7, 131, 250, 0.2)' },
				{ to: 'rgba(255, 46, 46, 0)', from: 'rgba(255, 46, 46, 0.2)' },
				{ to: 'rgba(7, 209, 250, 0)', from: 'rgba(7, 209, 250, 0.2)' },
				{ to: 'rgba(255, 209, 92, 0)', from: 'rgba(255, 209, 92, 0.2)' },
				{ to: 'rgba(32, 230, 164, 0)', from: 'rgba(32, 230, 164, 0.2)' },
			];
			const option = {
				color: colorList,
				// backgroundColor: '#000F28',
				legend: {
					top: '10%',
					right: '10%',
					icon: 'circle',
					itemWidth: 8,
					itemHeight: 8,
					itemGap: 12,
					textStyle: {
						color: '#94A7BD',
					},
				},
				xAxis: [
					{
						type: 'category',
						boundaryGap: true,
						axisTick: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: '#94A7BD', //轴线和单位颜色
							},
						},
						data: ['08-03', '08-04', '08-05', '08-06', '08-07', '08-08', '08-09', '08-10', '08-11', '08-12'],
					},
				],
				yAxis: [
					{
						type: 'value',
						name: '人',
						nameTextStyle: {
							fontSize: 14,
							color: '#94A7BD',
							padding: [0, 0, 0, -30],
						},
						axisLine: {
							lineStyle: {
								color: '#94A7BD', //轴线和单位颜色
							},
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#182D46',
								type: [2, 3],
								dashOffset: 2,
							},
						},
					},
				],
				series: newdata.map((item, index) => {
					return {
						name: item.name,
						type: 'line',
						smooth: true,
						symbol: 'none',
						symbolSize: 8,
						zlevel: 3,
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: areaColorList[index].from,
									},
									{
										offset: 1,
										color: areaColorList[index].to,
									},
								],
								global: false,
							},
						},
						data: item.data.map((item) => item.value),
					};
				}),
			};
			const chartDom = this.$refs.chart;
			this.commandstats = echarts.init(chartDom, 'macarons');
			this.commandstats.setOption(option);
		},
	},
};
</script>
<style scoped lang="scss">
.mapDom {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
}

.echarts {
	display: flex;
	align-items: center;

	.echartsLeft {
		width: auto;
		background-image: linear-gradient((#063053, 0.3), (#395873, 0.3), (#5c7c99.3));
	}

	.echartsRight {
		width: auto;
		background-color: #000;
	}

	.echartsCenter {
		flex: 1;
		background-color: #000;
	}
}
</style>
